<template>
  <div class="home_box">
      <div class="add_box">
        <input v-model="itemText" @keydown.enter="onAddItem" type="text" placeholder="请输入要添加的内容">
        <!--  @keydown.enter(按下回车键触发的事件) 键盘事件 --> 
        <!-- .后面的东西表示事件修饰符 一些通用的事件修饰符可以添加到所有的事件之后 -->
        <!-- .once 只触发一次 -->
        <!-- .prevent 阻止事件默认效果 -->
        <!-- .stop 阻止事件冒泡 -->
        <button @click="onAddItem">添加</button>
      </div>
      <div class="tab_box">
          <ul class="title_list">
              <li :class="item.active?'active':''" 
                v-for="item in list" 
                :key="item.id"
                @click="onTitleClick(item.id)">
                {{item.title}}
              </li>
          </ul>
          <div class="content_box"
            v-show="item.active"
            v-for="item in list" 
            :key="item.id">
              <h2>正在{{item.title==='游戏'?'玩':'看'}}的{{item.title}}</h2>
              <ul>
                  <li class="list_item" 
                    @dblclick="onChangeItem(index)"
                    v-for="(i,index) in item.list" 
                    :key="index">
                        <span v-show="index!=showInput">{{i}}</span>
                        <!-- <input v-show="index===showInput" type="text" :value="i"> -->
                        <input 
                            v-if="index===showInput && item.id===currentItemId" 
                            type="text"
                            ref="changeInput"
                            @blur="onInputBlur" 
                            @keydown.enter="onInputBlur"
                            v-model="item.list[index]">
                        <span @click="onDeletItem(item.list, index)" class="delete_btn">删除</span>
                  </li>
              </ul>
          </div>
      </div>
  </div>
</template>
<script>
    export default {
        data(){
            return {
                showInput: -1,//修改input框的显示和隐藏
                itemText:"",//input输入的内容
                currentItemId:0,
                list:[//整个的数据源
                    {
                        id:0,
                        title:"书籍",
                        active: true,
                        list:[
                            "三国演义",
                            "西游记",
                            "红楼梦"
                        ]
                    },
                    {
                        id:1,
                        title:"电影",
                        active: false,
                        list:[
                            "太极",
                            "敢死队",
                            "机械师"
                        ]
                    },
                    {
                        id:2,
                        title:"游戏",
                        active: false,
                        list:[
                            "英雄联盟",
                            "王者荣耀"
                        ]
                    },
                    {
                        id:3,
                        title:"综艺",
                        active: false,
                        list:[
                            "王牌对王牌",
                            "吐糟大会",
                            "奇葩说"
                        ]
                    },
                    {
                        id:4,
                        title:"体育",
                        active: false,
                        list:[
                            "羽毛球",
                            "足球",
                            "乒乓球"
                        ]
                    },
                ]
            }
        },
        methods:{
            //tab切换
            onTitleClick(id){
                //把当前要切换的item的id进行全局保存
                this.currentItemId = id;
                //遍历所有的数据,找到当前点击的item
                this.list.forEach(item => {
                    // if(item.id === id){
                    //     item.active = true;
                    // }else{
                    //     item.active = false;//把之前的所有item的active都变成false
                    // }

                    item.active = item.id === id;
                });
            },
            //点击添加按钮
            onAddItem(){
                //去掉当前字符串两端的空格
                let itemText = this.itemText.trim();
                //清空原始数据
                this.itemText = "";
                //非空验证
                if(!itemText){
                    return alert("请输入有效内容")
                }
                console.log(itemText,this.currentItemId);
                this.list.forEach(item=>{
                    //查找当前对应的数据源
                    if(item.id === this.currentItemId){
                        //去重
                        let a = 0;
                        item.list.forEach(i=>{
                            if(i === itemText) a++;
                        })
                        if(a>0){
                            alert("请勿重复添加")
                        }else{
                            //找到之后把用户输入的内容保存到对应的list中
                            item.list.push(itemText);
                        }
                    }
                })
            },
            // //鼠标滑过listItem
            // onListItemMouseOver(e){
            //     console.log("鼠标滑过listItem",e);
            //     let itemLi = e.target;
            //     itemLi.className = itemLi.className + " active"
            // }
            //删除数组中的某一项
            onDeletItem(list, index){
                list.splice(index,1)
            },
            //修改
            onChangeItem(index){
                //当用户双击触发修改事件的时候,
                //通过修改全局的showInput的值来实现展示和输入框的切换
                //数据展示是通过数组下标是否不等于showInput来控制
                //修改输入框得显示和隐藏式通过当前index是否和showIput相等来空
                this.showInput = index;

                //获取input组件,并且让这个组件获取到焦点
                console.log("changeInput",this.$refs.changeInput,this.$refs)
                //在unpdated生命周期执行完毕之后(本次DOM更新完毕之后)会立马执行回调函数内的方法
                this.$nextTick(_ => {
                    this.$refs.changeInput[0].focus();
                });
            },
            //
            onInputBlur(){
                this.showInput = -1;
            }
        }
    }
</script>

<style>
.home_box{
    margin: 100px auto;
    width: 600px;
    background-color: #eeeeee;
}
.add_box{
    height: 50px;
    line-height: 50px;
    text-align: center;
}
.add_box input{
    width: 200px;
    height: 30px;
}
.add_box button{
    margin-left: 20px;
    width: 50px;
    height: 34px;
}
.tab_box{
    height: 300px;
}
.title_list{
    user-select: none;
    height: 50px;
}
.title_list li{
    float: left;
    width: 80px;
    height: 50px;
    line-height: 50px;
    font-weight: 900;
    text-align: center;
    background-color: green;
    cursor: pointer;
}
.title_list li.active{
    color: #ffffff;
    background-color: blue;
}
.content_box{
    height: 250px;
    border: 2px solid #cccccc;
}
.content_box h2{
    text-align: center;
}
.list_item{
    position: relative;
    padding: 0 20px;
    height: 30px;
    line-height: 30px;
}
.list_item:hover{
    color: #ffffff;
    background-color: blue;
}
.delete_btn{
    color:#eeeeee;
    position: absolute;
    right: 20px;
    cursor: pointer;
}
</style>